<template>
    <div :id="this.id" class="chartdiv" style="height: 100%;width:100%">
        <el-row style="height: 10%">
            <div style="height: 100%"class="edit">
                <i @click="openTable" title="编辑" class="fa fa-edit" aria-hidden="true"></i>
            </div>
            <div style="height: 100%" class="close">
                <i @click="deleteTable" title="关闭" class="fa fa-trash" aria-hidden="true"></i>
            </div>
            <div style="height: 100%"  class="vue-draggable-handle">
                <i class="fa fa-arrows-alt" aria-hidden="true"></i>
            </div>
        </el-row>
        <el-row>
            <div :id="this.tableId" style="width:100%;height: 90%">
                <data-table style="width:100%;height: 100%" :tableInData="showTableData"></data-table>
            </div>
        </el-row>
    </div>
</template>

<script>
    import dataTable from '../table/dataTable.vue'
    export default {
        name: "tableDiv",
        components: {
            "data-table": dataTable
        },
        data() {
            return {
                tableId: '',
                chartData: '',
                currentTableDiv:'',
                showTableData: null,
            }
        },
        props: {
            id: String,
        },
        methods: {
            openTable(e) {
                this.$emit('openTable');
                this.currentTableDiv = $(e.target).parent().parent().find('.table').attr('id');
                this.$Bus.$emit('currentTableDiv', this);
            },
            deleteTable() {
                let nowElement = document.getElementById(this.id).parentElement.id;
                this.$emit('deleteSelectElement', nowElement);
            },
        },
        mounted() {
            this.tableId = 'tab' + this.id;
        }
    }
</script>

<style >
    .edit{
        /*background: #5daf34;*/
        position: absolute;
        right: 5%;
        top: 3%;
        font-size: 14px;
        padding-right: 3px;
        box-sizing: border-box;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: inline-flex;
        cursor:pointer;
    }
    .close{
        /*background: #5daf34;*/
        position: absolute;
        right: 0.5%;
        top: 3%;
        font-size: 14px;
        padding-right: 3px;
        box-sizing: border-box;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: inline-flex;
        cursor:pointer;
    }
    .vue-draggable-handle{
        /*background: #5daf34;*/
        position: absolute;
        left: 1%;
        top: 2%;
        font-size: 14px;
        padding-right: 3px;
        box-sizing: border-box;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: inline-flex;
        cursor:pointer;
    }
    .vue-draggable-handle:hover{
        color: #4060ff
    }
    .edit:hover{
        color: #4060ff
    }
    .close:hover{
        color: #4060ff
    }
</style>